<!DOCTYPE HTML>
<html>
<head>
<title>liveplayer</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
<link rel="stylesheet" href="/css/plugins/layui/layui.css"/>
<script type="text/javascript" src="/js/face/liveplayer-element.min.js"></script>
<script>
	videojs.options.flash.swf = "/js/face/liveplayer.swf";
</script> 
 
</head>
<div th:include="include :: header"></div>
<body >

	<div class="grzxbj" style="height:100%">
		<a th:href="${#httpServletRequest.getScheme() + '://' + #httpServletRequest.getServerName() + ':' + #request.getServerPort()  + #request.getContextPath() + '/'} "
 			id="contextPath"></a>

		<div class="selfinfo center">
		<div class="lfnav fl" style="height:900px;width:250;">
			<div  class="ddzx" style="width:180;font-size: 22px;font-weight: bold;color: rgb(117,117,117);">人脸识别中心</div>
			<div id="carousel" style="height:500px">
				<img id="img_1" src="/img/face/scan.gif" width="211" height="132" />
				<img id="img_2" src="/img/face/scan.gif" width="211" height="132" />
				<img id="img_3" src="/img/face/scan.gif" width="211" height="132" />
				<img id="img_4" src="/img/face/scan.gif" width="211" height="132" />
				<img id="img_5" src="/img/face/scan.gif" width="211" height="132" />
				<img id="img_6" src="/img/face/scan.gif" width="211" height="132" />
				<img id="img_7" src="/img/face/scan.gif" width="211" height="132" />
<!-- 						<img id="img_8" src="/img/face/scan.gif" width="211" height="132" /> -->
<!-- 						<img id="img_9" src="/img/face/scan.gif" width="211" height="132" />  -->
			</div>
			
		</div>
		<div class="rtcont fr">
			<div class="ddzxbt" >识别中的摄像头</div>
			<div class="ddzxbt">
				<div class="clear"></div>
				<div class="form-group" >
					<form id="form" action="/video/viewFace" method="get" >
		                <span class="col-sm-2 control-label" style="padding-right: 0px;text-align: right;"> 
		                 	<label style="font-size:15px;">所属分组：</label>
		                </span>
		                <div class="col-sm-2" style="padding-left: 0px;padding-top: 15px;">
		                	<select  id="groupType" name="groupType" class="form-control" title="类型"> </select>
		                </div>
		                <input id="groupTypeValue" th:value="${groupType}" type="hidden">
		             	<div class="col-sm-2" >
			                 <button type="submit" class="btn btn-primary"  style="">查&nbsp;&nbsp;询</button>
			            </div> 
		             </form>
	            </div>
				<div class="clear"></div>
			</div> 
			<div th:if="${#lists.isEmpty(vars)}" class="ddxq" style="height: 240px;">
				<div class="ddbh fl"  >请选择摄像头分组进行查看</div>
			</div>
			
				<div class="clear" style="text-align: center;color:green;border:1px solid #ff6700;" id="message"></div> 
			 
			<div th:each="item : ${vars}" class="ddxq" style="height: 240px;"> 
				
				<div class="ddspt fl" style="width:350px;height:198px">
					<live-player th:video-url="${item?.rtmpUrl}" 
						live="true" stretch="true"  autoplay="false" ></live-player>
				 
				</div> 
				<div class="ztxx">
					<ul>
						<li th:text="|${item?.name}|">已发货</li>
						<li th:text="${item?.groupName}">已发货</li> 
						<li ></li> 
						<div class="clear"></div>
					</ul>
				</div>
				<div class="clear"></div>
			</div>  
		</div>
		<div class="clear"></div>
		</div>
	</div> 
	  
</body>
<div th:include="include :: footer"></div> 
<script type="text/javascript"  src="/js/video/add.js"></script> 
<script type="text/javascript" src="/js/face/jquery.carouFredSel-6.1.0-packed.js"></script>
<script type="text/javascript">
	$(function() {
		$('#carousel').carouFredSel({
				auto: 0,
				responsive: true,
				infinite:true,
				circular:true,
				mousewheel: true,
				direction: 'up',
				height: '100%',
				items: {
					height: 150,
					width: '160%',
					visible: {
						min: 1,
						max: 8
					}
				},
				scroll: {
					items: 1,
					easing          : "linear",
			        duration        : 2000,                         
			        pauseOnHover    : true
				}
		}); 
	});
</script> 
<!-- websocket -->
<script type="text/javascript"  th:inline="javascript">
	var contextPath = $('#contextPath').attr('href');//获取应用的根目录，我的绝对路径是http://localhost:80/
	contextPath = contextPath.substring(7); 
    var websocket = null;
    
    var gType = [[${groupType}]];
    
    if(gType){
    	var wsUrl = 'ws://'+contextPath+'hessian/websocket/'+gType; 
    	reconnect(wsUrl); 
    } 
    //判断当前浏览器是否支持WebSocket
    
    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function () {
        closeWebSocket();
    }
    
    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
        $('#message').text(innerHTML);
    }
 
    //关闭WebSocket连接
    function closeWebSocket(){
    	if(websocket){
    		websocket.close();
    	} 
    } 
    
    var heartCheck = {
    	timeout: 3595000,//60ms
    	//timeout: 1000,//60ms
   	    timeoutObj: null,
   	    reset: function(){
   	        clearTimeout(this.timeoutObj);
   	　　　　 	return this;
   	    },
   	    start: function(){
   	    	var self = this;
   	        this.timeoutObj = setTimeout(function(){websocket.send("HEART_BEAT");},this.timeout)
   	    }
   	} 
    //发送消息
    function send() {
        var message = document.getElementById('text').value;
        if(!message){
        	alert("发送信息不能为空",3000)
        	return false;
        } 
        websocket.send(message);
    }
    
    
 	// 重连
    function reconnect(url) {
	    if (reconnect.lockReconnect) return;
	    reconnect.lockReconnect = true;
	    setTimeout(function () {     //没连接上会一直重连，设置延迟避免请求过多
	        createWebSocket(url);
	        reconnect.lockReconnect = false;
	    }, 2000);
	}

    // 实例websocket
    function createWebSocket(url) {
        try {
            if ('WebSocket' in window) {
            	websocket = new WebSocket(url);
            } else if ('MozWebSocket' in window) {
            	websocket = new MozWebSocket(url);
            } else {
                alert("当前浏览器不支持websocket协议,建议使用现代浏览器",3000) 
                console.log("SockJS");
                websocket = new SockJS(url); 
            }
            initEventHandle();
        } catch (e) {
            reconnect(url);
        }
    }

    // 初始化事件函数
    function initEventHandle() {
    	websocket.onclose = function(){
    		setMessageInnerHTML("连接关闭,进行重连");
    	    reconnect(wsUrl);
    	    
   	    };
   	 	websocket.onerror = function (err) {
   	 		setMessageInnerHTML("连接发生错误");
   	        reconnect(wsUrl);
   	    };
   	 	websocket.onopen = function () {
	   	 	heartCheck.reset().start();
	        setMessageInnerHTML("人脸识别系统连接成功");
   	    };
   	 	websocket.onmessage = function (msg) {    //如果获取到消息，心跳检测重置
   	        
   	     	if(!msg){
	        	websocket.close();
	        }else if(typeof msg.data =='string'){
	        	if("HEART_BEAT" == msg.data){
	        		//setMessageInnerHTML(msg.data);
	        	}else{
	        		var checkMsg = JSON.parse(msg.data); 
// 	        		console.log(checkMsg.faceIds);
//   	        		console.log(checkMsg.faceIds);
//   	        		console.log(checkMsg.similars);
					if(checkMsg.faceIds){
						showFace(checkMsg);	
					} 
	        	}
	     	}else{ 
	     		blobToDataURI(msg.data,showFaceImg)
	     		heartCheck.reset().start(); 
	     	}
   	    };
    }
    function blobToDataURI(blob, callback) {
   	   var reader = new FileReader();
   	   reader.readAsDataURL(blob);
   	   reader.onload = function (e) {
   	       callback(e.target.result);
   	   }
   	}
    var count = 0;
    function showFaceImg(data){ 
    	if(count == 8){
    		count = 0;
    	}
    	$('#img_'+count).attr('src',data); 
    	count++;
//         $("#carousel").append('<img src='++' width="211" height="132" /> ');
//         $('#carousel').children('img').first().remove();
    } 
    function showFace(checkMsg){ 
    	
    	var faceIds = checkMsg.faceIds.split(',')
    	var spanSize = 1; 
		var similars = checkMsg.similars.split(',')
			
		var firstFace = faceIds[0];
    	faceIds.splice(0,1);
    	var firstSmil = similars[0];
    	similars.splice(0,1);
    	var subFaces =faceIds.join(","); 
    	var firstMan = getFace(firstFace)[0];
    	
    	var subHtmlText = '';
    	if(faceIds.length > 0){
    		for(faceIndex in faceIds){
    			var subMans = getFace(faceIds[faceIndex]);
    			spanSize += subMans.length;
    			for (subMan in subMans) { 
    				subHtmlText += 
    				 '	<tr style="border:1px solid #FFC1C1;" >																	'
    				+'		<td style="border:1px solid #FFC1C1;"> <h2>相似度:'+similars[faceIndex]+'%</h2> </td>											'
    				+'		<td style="border:1px solid #FFC1C1;"> 																'
    				+'			<div>															'
    				+'				<span>姓名：'+subMans[subMan].name+'</span> <br>										'
    				+'				<span>年龄：'+subMans[subMan].age+'</span> <br>										'
    				+'				<img src="/img/face/scan.gif" width="100" height="100" />	'
    				+'			</div> 															'
    				+'		</td>																'
    				+'	</tr>																	';
    			}
    		}
    	} 
    	
		var htmlText = '<table  align="center" style="border:1px solid #FFC1C1;margin: 50px 50px 50px 50px;height:500px;width:700px" >				' 
    	+' <tbody style="border:1px solid #FFC1C1;"> 													  				' 
    	+'	  <tr  style="width:100px;border:1px solid #FFC1C1;" align="center">' 
    	+'  		<td colspan="3" ><h1 style="font-size: 20px;font-weight: bold;" >识别到相关人员</h1></td>'
    	+'	  </tr>'
		+'	  <tr style="border:1px solid #FFC1C1;"> 																' 
		+'		<td rowspan="'+spanSize+'" style="width:200px;border:1px solid #FFC1C1;" > 								'
		+'				<img  src="data:image/jpeg;base64,'+checkMsg.img+'" width="211" height="132" />	'
		+'		</td>																'
		+'		<td style="border:1px solid #FFC1C1;"> <h2>相似度:'+firstSmil+'%</h2> </td>											'
		+'		<td style="border:1px solid #FFC1C1;"> 																'
		+'			<div>															'
		+'				<span>姓名：'+firstMan.name+'</span> <br>										'
		+'				<span>年龄：'+firstMan.age+'</span> <br>										'
		+'				<img src="/img/face/scan.gif" width="100" height="100" />	'
		+'			</div> 															'
		+'		</td>																'
		+'	</tr>																	';
		 
		htmlText += subHtmlText;
		  
		htmlText += '</tbody> </table>';

        layer.open({
      	  	type: 1,
      	  	title: false,
      	  	closeBtn: 0,
      	  	area : [ '800px', '820px' ],
      	  	shadeClose: true,
      	  	skin: 'yourclass',
      	  	content : htmlText,
      	});
    }
    
    function hasData(){
		var hasData = getFace();
		console.log(hasData);
	}
	function getFace(faceId){
		var facedata = null;
		$.ajax({
			  url: "/video/showfacedata",
			  async:false,//取消异步请求
			  data: {faceIds:faceId},
			  dataType: 'json', 
			  success: function (data,textStatus,request) {
				  
				  if (data.code == 0) {
					  facedata = data.data;
				  }else{ 
					  layer.msg(data.msg);
				  }
			  },
			  error:function (data,textStatus,request){
				  
			  	  layer.msg("网络异常");  
				   
			  } 
		});
		return facedata;
	}
    
//     function showFace(faceIds){
//     	var idex = layer.open({
//     		type : 2,
//     		title : '匹配人员',
//     		maxmin : true,
//     		shadeClose : false, // 点击遮罩关闭层
//     		area : [ '100px', '120px' ],
//     		content : '/hessian/show?faceIds='+faceIds,
//     	});
//         layer.full(idex);
//     }
</script>
</html>